<template>
  <div class="login-one">
    <el-row>
      <el-col :span="8">&nbsp;</el-col>
      <el-col :span="8">
        <br><br><br><br><br><br><br><br><br>
        <h1 align="center" style=" font-family: Helvetica;">金融风控图谱系统后台</h1>
        <el-tabs type="border-card" v-model="activeTab">
          <!-- 1. 用户名密码登录 tab -->
          <el-tab-pane label="用户登录" name="passwordTab">
            <el-form
              label-width="80px"
              style="background-color: white;border-radius: 3%;padding-top: 5px"
            >
              <el-form-item label="用户名">
                <el-col :span="20">
                  <el-input
                    v-model="username"
                    placeholder="请输入用户名"
                    clearable
                  ></el-input>
                </el-col>
              </el-form-item>

              <el-form-item label="密码">
                <el-col :span="20">
                  <el-input
                    show-password
                    v-model="password"
                    placeholder="请输入密码"
                    clearable
                  ></el-input>
                </el-col>
              </el-form-item>

              <el-form-item>
                <el-col :span="6">&nbsp;</el-col>
                <el-col :span="10">
                  <el-button
                    type="success"
                    icon="el-icon-s-custom"
                    size="mini"
                    @click="handlePasswordLogin"
                    :loading="loginLoading"
                  >
                    登录
                  </el-button>
                </el-col>
                <el-col :span="8">&nbsp;</el-col>
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <!-- 2. 邮箱登录 tab（新增发送验证码按钮） -->
          <el-tab-pane label="邮箱登录" name="emailTab">
            <el-form
              label-width="80px"
              style="background-color: white;border-radius: 3%;padding-top: 5px"
            >
              <el-form-item label="邮箱">
                <el-col :span="20">
                  <el-input
                    v-model="email"
                    placeholder="请输入邮箱"
                    clearable
                    @blur="checkEmailFormat"
                  ></el-input>
                </el-col>
              </el-form-item>

              <el-form-item label="验证码">
                <el-col :span="12">  <!-- 验证码输入框占12列 -->
                  <el-input
                    v-model="verifyCode"
                    placeholder="请输入验证码"
                    clearable
                  ></el-input>
                </el-col>
                <el-col :span="8">  <!-- 发送按钮占8列 -->
                  <el-button
                    type="primary"
                    size="mini"
                    @click="handleSendCode"
                    :disabled="countdown > 0 || !email"
                  >
                    {{ countdown > 0 ? `${countdown}s后重发` : '发送验证码' }}
                  </el-button>
                </el-col>
              </el-form-item>

              <el-form-item>
                <el-col :span="6">&nbsp;</el-col>
                <el-col :span="10">
                  <el-button
                    type="success"
                    icon="el-icon-s-custom"
                    size="mini"
                    @click="handleEmailLogin"
                    :loading="loginLoading"
                  >
                    登录
                  </el-button>
                </el-col>
                <el-col :span="8">&nbsp;</el-col>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="8">&nbsp;</el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      // 1. 表单数据（与后端接口参数名完全一致）
      username: '',    // 对应后端/login接口的"username"参数
      password: '',    // 对应后端/login接口的"password"参数
      email: '',       // 对应后端/send_email接口的"email"参数
      verifyCode: '',  // 对应后端/code_login接口的"code"参数

      // 2. 状态控制
      activeTab: 'passwordTab',  // 默认激活"用户登录"tab
      countdown: 0,              // 验证码倒计时（防止频繁发送）
      loginLoading: false        // 登录按钮加载状态（避免重复点击）
    }
  },
  methods: {
    // -------------------------- 1. 用户名密码登录（对接后端/login接口） --------------------------
    async handlePasswordLogin() {
      // 前端基础校验（非空）
      if (!this.username.trim()) {
        this.$message.warning('请输入用户名！');
        return;
      }
      if (!this.password.trim()) {
        this.$message.warning('请输入密码！');
        return;
      }

      try {
        this.loginLoading = true;  // 开启加载状态
        // 发送POST请求到后端/login接口（POST比GET安全，避免密码暴露在URL）
        const res = await this.$http.post('/login/', {
          username: this.username.trim(),  // 传递用户名（去空格）
          password: this.password.trim()   // 传递密码
        });

        // 处理后端返回结果（后端返回格式：{code:200/500, msg:"提示信息"}）
        if (res.data.code === 200) {
          this.$message.success('登录成功！');
          // 登录成功后跳转首页（需确保Vue Router已配置"/home"路由）
          this.$router.push('/index/');
        } else {
          this.$message.error(res.data.msg || '登录失败，请检查用户名或密码！');
        }
      } catch (error) {
        // 捕获网络错误（如后端没启动、跨域配置错）
        console.error('密码登录请求失败：', error);
        this.$message.error('网络错误，请检查后端是否正常运行！');
      } finally {
        this.loginLoading = false;  // 关闭加载状态
      }
    },

    // -------------------------- 2. 发送验证码（对接后端/send_email接口） --------------------------
    async handleSendCode() {
      // 前端校验（邮箱格式）
      const emailReg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
      if (!emailReg.test(this.email.trim())) {
        this.$message.warning('请输入正确的邮箱格式（如xxx@xxx.com）！');
        return;
      }

      try {
        // 发送POST请求到后端/send_email接口
        const res = await this.$http.post('/send_email/', {
          email: this.email.trim()  // 传递邮箱
        });

        if (res.data.code === 200) {
          this.$message.success('验证码已发送到您的邮箱，5分钟内有效！');
          // 启动倒计时（60秒后可重新发送）
          this.countdown = 60;
          const timer = setInterval(() => {
            this.countdown--;
            if (this.countdown <= 0) {
              clearInterval(timer);  // 倒计时结束清除定时器
            }
          }, 1000);
        } else {
          this.$message.error(res.data.msg || '验证码发送失败，请重试！');
        }
      } catch (error) {
        console.error('发送验证码请求失败：', error);
        this.$message.error('网络错误，请检查后端是否正常运行！');
      }
    },

    // -------------------------- 3. 邮箱验证码登录（对接后端/code_login接口） --------------------------
    async handleEmailLogin() {
      // 前端基础校验（非空）
      if (!this.email.trim()) {
        this.$message.warning('请输入邮箱！');
        return;
      }
      if (!this.verifyCode.trim()) {
        this.$message.warning('请输入验证码！');
        return;
      }

      try {
        this.loginLoading = true;
        // 发送POST请求到后端/code_login接口（后端从Cookie读存储的验证码）
        const res = await this.$http.post('/code_login', {
          code: this.verifyCode.trim()  // 传递用户输入的验证码
        });

        if (res.data.code === 200) {
          this.$message.success('登录成功！');
          this.$router.push('/home');  // 跳转首页
        } else {
          this.$message.error(res.data.msg || '验证码错误或已失效！');
        }
      } catch (error) {
        console.error('验证码登录请求失败：', error);
        this.$message.error('网络错误，请检查后端是否正常运行！');
      } finally {
        this.loginLoading = false;
      }
    },

    // -------------------------- 辅助：邮箱格式校验（失去焦点时触发） --------------------------
    checkEmailFormat() {
      if (this.email.trim() && !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(this.email.trim())) {
        this.$message.warning('请输入正确的邮箱格式（如xxx@xxx.com）！');
      }
    }
  }
}
</script>

<style scoped>
@import url('../../assets/css/login.css');
/* 可选：优化按钮间距 */
.el-button {
  margin-right: 8px;
}
</style>
